<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            width: 800px;
            min-height: 300px;
            margin :0 auto;
            overflow: hidden;
        }
        hr{
            margin: 10px 0;
        }
        .item{
            width: 160px;
            height: 220px;
            float:left;
            position:relative;
            margin-right: 30px;
            margin-bottom: 30px;
        }

        .item h4{
            position:absolute;
            width: 70%;
            height: 1em;
            left: 10px;
            bottom: 10px;
            color:white;
        }

        .item .rate{
            width: 20%;
            height:1em;
            right: 10px;
            bottom: 10px;
            position:absolute;
            color: rgb(97, 182, 211);
        }

        .item img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
        // https://maoyan.com/?utm_source=meituanweb   猫眼电影热映榜
        let movies = [
            {
                title: '怒火·重案',
                img: 'https://p1.meituan.net/moviemachine/51b193283628a62b85ba31ddc818ffde1560410.jpg@320w_440h_1e_1c',
                rate: 9.5
            },
            {
                title: '盛夏未来',
                img: 'https://p0.meituan.net/movie/056cce783466d9531ad736068c2e134e4100879.jpg@320w_440h_1e_1c',
                rate: 9.2
            },{
                title: '白蛇2：青蛇劫起',
                img: 'https://p0.meituan.net/movie/cba20984e8e4423598913077e515b6121686728.jpg@320w_440h_1e_1c',
                rate: 9.1
            },{
                title: '中国医生',
                img: 'https://p1.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@320w_440h_1e_1c',
                rate: 9.4
            },
            {
                title: '贝肯熊2：金牌特工',
                img: 'https://p0.meituan.net/movie/70ed5d23afc45de7749dfafa2a8a1bd23977288.jpg@320w_440h_1e_1c',
                rate: 8.9
            },
            {
                title: '流浪猫鲍勃2：鲍勃的礼物',
                img: 'https://p1.meituan.net/mmdb/defb0d5f7845b6a2b3e7444e03afa5d7278009.jpg@320w_440h_1e_1c',
                rate: 8.0
            },
            {
                title: '1921',
                img: 'https://p1.meituan.net/movie/63cb3dbbaff624b236b2e22b2ee59cff1553093.jpg@320w_440h_1e_1c',
                rate: 9.4
            },
            {
                title: '新大头儿子和小头爸爸4：完美爸爸',
                img: 'https://p0.meituan.net/movie/df89b11a57dd63760a6c3d544c61e4a83956828.jpg@320w_440h_1e_1c',
                rate: 8.8
            }
        ]

        //创建虚拟 DOM 对象
        let vDOM = <div className='container'>
                <h2>正在热映</h2>
                <hr />
                <div className="movies">
                        
                    {
                        movies.map((item,index) => {
                            return <div className="item">
                                <div className="img"><img src={item.img} alt="" /></div>
                                <h4>{item.title.substr(0, 5)}</h4>
                                <div className="rate">{item.rate}</div>
                            </div>
                        })
                    }
                    
                    

                </div>
            </div>;

        //渲染
        ReactDOM.render(vDOM, document.querySelector("#root"));
    </script>
</body>
</html>